<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>登录</title>
	<link rel="stylesheet" type="text/css" th:href="@{/static/login/vendor/bootstrap/css/bootstrap.min.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/login/fonts/iconic/css/material-design-iconic-font.min.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/login/css/util.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/login/css/main.css}">
	<style type="text/css">
		.mui-toast-container {
			line-height: 17px;
			position: fixed;
			z-index: 9999;
			bottom: 50px;
			left: 50%;
			-webkit-transition: opacity .3s;
			transition: opacity .3s;
			-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
			opacity: 0
		}
		
		.mui-toast-container.mui-active {
			opacity: .9
		}
		
		.mui-toast-message {
			font-size: 14px;
			padding: 10px 25px;
			text-align: center;
			color: #fff;
			border-radius: 6px;
			background-color: #323232
		}
	</style>
</head>

<body>
	<div class="limiter">
		<div class="container-login100" style="background-image: url('/static/login/images/bg-01.jpg');">
			<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
					<span class="login100-form-title p-b-49">登录</span>

					<div class="wrap-input100 validate-input m-b-23" data-validate="请输入微记号">
<!-- 						<span class="label-input100">微记号</span> -->
						<input class="input100" type="text" name="username"  id="username" placeholder="请输入微记号" autocomplete="off">
						<span class="focus-input100" data-symbol="&#xf206;"></span>
					</div>

					<div class="wrap-input100 validate-input" data-validate="请输入密码">
<!-- 						<span class="label-input100">密码</span> -->
						<input class="input100" type="password" name="pass"  id="pass"  placeholder="请输入密码">
						<span class="focus-input100" data-symbol="&#xf190;"></span>
					</div>

					<div class="text-right p-t-8 p-b-31">
						<a href="javascript:">忘记密码？</a>
					</div>

					<div class="container-login100-form-btn">
						<div class="wrap-login100-form-btn">
							<div class="login100-form-bgbtn"></div>
							<button style="text-align: center;" class="login100-form-btn" onclick="save()">登 录</button>
						</div>
					</div>
			</div>
		</div>
	</div>
	
<script th:src="@{/static/login/vendor/jquery/jquery-3.2.1.min.js}"></script>
<script type="text/javascript" th:src="@{/static/js/mui.min.js}"></script>
<script type="text/javascript">
	function save(){
		if($("#username").val()==''){
			mui.toast('用户名不可为空喔',{ duration:'10', type:'div' });
			return;
		}
		if($("#pass").val()==''){
			mui.toast('密码不可为空喔',{ duration:'10', type:'div' });
			return;
		}
        $.ajax({
            type: "POST",
            url: '[[${sysUrl}]]/login/post',
            data: {
				"name":$("#username").val(),
				"password":$("#pass").val()
            },
            dataType:"json",
            success: function(data){
            	if(data.meta.success){
            		mui.toast('登录成功',{ duration:'10', type:'div' });
            		window.location.href = "[[${sysUrl}]]/wensay/home.html";
                }else{
            	   mui.toast(data.meta.message,{ duration:'10', type:'div' });
                }
             },
             complete :function(XMLHttpRequest, textStatus){
            	
             },
             error:function(XMLHttpRequest, textStatus, errorThrown){ 
            	 mui.toast('系统异常...',{ duration:'10', type:'div' });
             }
         }); 		
	}
	
</script>

</body>

</html>